﻿@page "/Axes/MatchScale"
@using LiveChartsCore.SkiaSharpView.Blazor
@using LiveChartsCore;
@using LiveChartsCore.Defaults;
@using LiveChartsCore.SkiaSharpView;
@using LiveChartsCore.SkiaSharpView.Painting;
@using SkiaSharp;

<div style="background-color: #333333; padding: 20px">
    <CartesianChart
        Series="@series"
        XAxes="@xAxes"
        YAxes="@yAxes"
        DrawMarginFrame="@frame"
        MatchAxesScreenDataRatio="true"
        ZoomMode="LiveChartsCore.Measure.ZoomAndPanMode.Both"
        TooltipPosition="LiveChartsCore.Measure.TooltipPosition.Hidden">
    </CartesianChart>
</div>

@code {
    private ObservablePoint[] values;
    private ISeries[] series;
    private Axis[] xAxes;
    private Axis[] yAxes;
    private DrawMarginFrame frame;

    public MatchScale()
    {
        values = new ObservablePoint[1001];
        var fx = EasingFunctions.BounceInOut;
        for (var i = 0; i < 1001; i++)
        {
            var x = i / 1000f;
            var y = fx(x);
            values[i] = new ObservablePoint(x - 0.5, y - 0.5);
        }

        series = new ISeries[]
        {
            new LineSeries<ObservablePoint>
            {
                Values = values,
                Stroke = new SolidColorPaint(new SKColor(33, 150, 243, 255), 4), // DeepSkyBlue
                Fill = null,
                GeometryStroke = null,
                GeometryFill = null
            }
        };

        var separatorColor = new SKColor(119, 148, 180, 100); // #64b4b4b4 with alpha 100

        // we are forcing the step to 0.1 to highlight that
        // both axes take the same amount of pixels per unit of data,
        // but in a real scenario the MinStep is not necessary

        xAxes = new Axis[]
        {
            new Axis
            {
                Name = "XAxis",
                SeparatorsPaint = new SolidColorPaint(separatorColor),
                MinStep = 0.1,
                ForceStepToMin = true
            }
        };
        yAxes = new Axis[]
        {
            new Axis
            {
                Name = "YAxis",
                SeparatorsPaint = new SolidColorPaint(separatorColor),
                MinStep = 0.1,
                ForceStepToMin = true
            }
        };

        frame = new DrawMarginFrame
        {
            Stroke = new SolidColorPaint(separatorColor, 2)
        };
    }
}
